<template>
  <div>
    <a-card :bordered="false">
      <a-spin :spinning="loading">
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <div class="title">收据打印设置</div>
          <a-form-model-item label="二维码">
            <a-upload
              list-type="picture-card"
              :file-list="fileList"
              :before-upload="beforeUpload"
              @change="handleChange"
              :remove="removePic"
            >
              <div v-if="fileList.length <1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </a-form-model-item>
          <a-form-model-item label="宣传语">
            <a-input
              v-model="form.intro"
              type="textarea"
              :maxLength="1000"
              placeholder="最多输入1000字"
              :autoSize="{
          minRows:5,
          maxRows:10
        }"
            />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 2 }">
            <a-button type="primary" @click="onSubmit" :loading="loading">保存</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-card>
  </div>
</template>

<script>
import { editRecipt, getInfo } from '@/api/receiptPrint'
import { uploadPic } from '@/api/login'
export default {
  data() {
    return {
      loading: false,
      form: {
        qrcode: '',
        intro: '',
      },
      previewVisible: false,
      previewImage: '',
      labelCol: { span: 2 },
      wrapperCol: { span: 6 },
      fileList: [],
      remove: true,
    }
  },
  created() {
    this.loading = true
    this.getDefaultInfo()
  },
  methods: {
    removePic() {
      this.remove = false
    },
    getDefaultInfo() {
      getInfo({
        school_id: this.$store.state.user.school,
        key: 'receipt_printing',
      })
        .then((res) => {
          if (res.value && !(res.value instanceof Array)) {
            this.form = res.value
            if (res.value.qrcode) {
              this.form.qrcode.url = res.value.qrcode.url
              this.fileList = [
                {
                  uid: 1,
                  url: res.value.qrcode.url,
                  name: res.value.qrcode.path,
                },
              ]
            }
          }
          this.loading = false
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取数据失败')
          this.loading = false
        })
    },
    onSubmit() {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.form))
      let obj = {
        key: '',
        school_id: null,
        value: {},
      }
      if (this.remove == false) {
        params.qrcode = null
      }
      obj.key = 'receipt_printing'
      obj.school_id = this.$store.state.user.school
      obj.value = params
      this.loading = true
      editRecipt(obj)
        .then((res) => {
          this.$message.success('设置成功')
          this.getDefaultInfo()
          this.loading = false
        })
        .catch((err) => {
          this.$message.error(err.data.message || '设置失败')
          this.loading = false
        })
    },
    beforeUpload(file) {
      this.fileList = []
      const isJpgOrPng =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/svg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/gif'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg/png图片格式！')
        return
      }
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error('只能上传10MB以内的图片!')
        return
      }
      const _this = this
      const formData = new FormData()
      formData.append('file', file)
      formData.append('school_id', this.$store.state.user.school)
      // 输出
      this.loading = true
      uploadPic(formData)
        .then((res) => {
          this.previewImage = res.url
          this.fileList = [
            {
              name: res.path,
              uid: '-1',
              url: res.url,
            },
          ]
          this.form.qrcode = res
          this.remove = true
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
          this.$message.error(err.data.message || '上传失败，请稍后重试~')
        })
      return false
    },
    handleCancel() {
      this.previewVisible = false
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  margin-top: 20px;
  color: #000;
  margin-left: 10px;
  margin-bottom: 20px;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  font-weight: 400;
}
</style>